<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('上传报告')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg" style="margin-top: 0px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">[[#{inspectionReport}]][[#{image}]]</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">[[#{inspectionReport}]]</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <!--报告图-->
                            <div class="ibox-title">
                                <h5>[[#{image}]] <small></small></h5>
                            </div>
                            <div class="ibox-content">
                                <div class="file-loading">
                                    <input id="fileinput-img" name="file" type="file" accept="image/*" multiple="multiple" data-max-file-count="5">
                                </div>
                                <span><i class="fa fa-info-circle"></i>[[#{uploadImageTips}]]</span>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <!--检测报告-->
                            <div class="ibox-content">
                                <div class="file-loading">
                                    <input id="fileinput-file" name="file" type="file"  accept="application/pdf" data-max-file-count="5">
                                </div>
                                <span><i class="fa fa-info-circle"></i>[[#{uploadFileTips}]]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "business/traceability";
        var imgData = [[${imgInfo}]]
        var fileData = [[${fileInfo}]]
        var uploadImageUrl = prefix + "/upload/file";
        var deleteImageUrl = prefix +"/deleteFile";
        var traceabilityId = [[${traceabilityId}]]

        $(document).ready(function () {
            initFileInput();

            initSingleFileInput();
        });

        //多文件上传 图片
        function initFileInput() {
            $("#fileinput-img").fileinput({
                theme: 'explorer-fas',
                uploadUrl: uploadImageUrl,
                uploadAsync: true,
                allowedFileType : ['image'],
                allowedFileExtensions : ['jpg','jpeg','png','gif'],
                previewFileType :'image',
                maxFileSize: (1024 * 10),
                maxFileCount: 5,
                deleteUrl: deleteImageUrl +"/1",
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreviewFileType: 'image',
                initialPreview: imgData.url,
                initialPreviewConfig: imgData.config
            }).on('filebatchselected', function (event, data, id, index) {
                $(this).fileinput("upload"); //选择后自动上传事件
            }).on("fileuploaded", function (event, data, previewId, index) {
                //console.log("data:"+data);
                //console.log(previewId);
                if(data.response.code == 0){
                    var formData = new FormData();
                    formData.append('type', 2);
                    formData.append('traceabilityId', traceabilityId);
                    formData.append('reportImageUrl', data.response.fileName);
                    postRequest(prefix + "/upload/save/report", formData, previewId);
                } else {
                    console.log("code:"+data.response.code +"  msg:"+data.response.msg);
                    $.modal.alertWarning(data.response.msg)
                }
            }).on("filesuccessremove",function (event, previewId, extra) {
                if(confirm(i18n('confirmDeleteImageTips'))){
                    //这里可以调用接口删除服务器原文件
                    //console.log("@==="+previewId);
                    //console.log(extra);

                    var imgId = $("#input_"+previewId).val();
                    if(imgId != undefined){
                        var formData = new FormData();
                        formData.append('key', imgId);
                        postRequest(deleteImageUrl, formData);
                    }
                } else {
                    return false;
                }
            }).on('filesorted', function(e, params) {
                //console.log('File sorted params', params);
                console.log('File sorted ', params.previewId, params.oldIndex, params.newIndex, params.stack);
                var keyArr = [];
                for(imgInfo of params.stack){
                    keyArr.push(imgInfo.key);
                }
                var data = {"ids":keyArr.join()};
                $.operate.post(prefix + "/save/file/sort", data);
            });
        }


        //单文件上传  检测报告
        function initSingleFileInput() {
            $("#fileinput-file").fileinput({
                theme: 'explorer-fas',
                uploadUrl: uploadImageUrl,
                previewFileType :'pdf',
                maxFileSize: (1024 * 30),
                maxFileCount: 5,
                deleteUrl: deleteImageUrl +"/2",
                uploadAsync: true,
                allowedFileExtensions:['pdf'],
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreviewFileType: 'pdf',
                initialPreview: fileData.url,
                initialPreviewConfig: fileData.config
            }).on('filebatchselected', function (event, data, id, index) {
                $(this).fileinput("upload"); //选择后自动上传事件

            }).on("fileuploaded", function (event, data, previewId, index) {
                //console.log(previewId);

                if(data.response.code == 0){
                    var formData = new FormData();
                    formData.append('traceabilityId', traceabilityId);
                    formData.append('testReportUrl', data.response.fileName);
                    postRequest(prefix + "/upload/save/report", formData, previewId);
                } else {
                    console.log("code:"+data.response.code +"  msg:"+data.response.msg);
                    $.modal.alertWarning(data.response.msg)
                }

            }).on("filesuccessremove",function (event, previewId, extra) {

                if(confirm(i18n('confirmDeleteFileTips'))){
                    //这里可以调用接口删除服务器原文件
                    //console.log("@==="+previewId);
                    //console.log(extra);

                    var imgId = $("#input_"+previewId).val();
                    if(imgId != undefined) {
                        var formData = new FormData();
                        formData.append('key', imgId);
                        postRequest(delFileUrl, formData);
                    }
                } else {
                    return false;
                }
            });
        }

        var that = this;
        //post请求
        function postRequest(url, formData, previewId) {
            $.ajax({
                url: url,
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    if (result.code == that.web_status.SUCCESS) {
                        $.modal.msgSuccess(result.msg);
                        addImgInfo(previewId, result.imgId);

                    } else if (result.code == that.web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            });
        }

        function addImgInfo(previewId, imgId) {
            if(previewId != undefined && previewId != null){
                $("#fileinput-img").before("<input name=\"imgId\" id='input_"+previewId+"' value='"+imgId+"' type=\"hidden\">")
            }
        }

        function submitHandler() {
            $.modal.close();

            activeWindow().$.table.refresh();

            activeWindow().jump();
        }
    </script>
</body>
</html>